import React from "react";
import PageTitle from "component/page-title/index.jsx";
import Pagination from "component/pagination";

import User from "@/service/user-service.jsx";
import Mutils from "@/utils/index.jsx";
import moment from "moment";

const _user = new User();
const _mm = new Mutils();

class UserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pageNum: 1,
      list: []
    };
  }
  componentWillMount() {
    document.title = "用户列表 -IMOOC Admin";
  }
  componentDidMount() {
    this.loadUserList();
  }
  loadUserList() {
    _user
      .getUserList({
        pageNum: this.state.pageNum
      })
      .then(
        res => {
          this.setState(res.data);
        },
        err => {
			this.setState({
				list:[]
			})
          _mm.errorTips(err);
        }
      );
  }
  handlePageChange(pageNum) {
    this.setState(
      {
        pageNum
      },
      () => {
        this.loadUserList();
      }
    );
  }
  render() {
    return (
      <div id="page-wrapper">
        <PageTitle title="用户列表" />
        <div className="row">
          <div className="col-md-12">
            <table className="table table-striped table-bordered">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>用户名</th>
                  <th>邮箱</th>
                  <th>电话</th>
                  <th>注册时间</th>
                </tr>
              </thead>
              <tbody>
                {this.state.list.length>0 ? (
                  this.state.list.map(v => (
                    <tr key={v.id}>
                      <td>{v.id}</td>
                      <td>{v.username}</td>
                      <td>{v.email}</td>
                      <td>{v.phone}</td>
                      <td>
                        {moment(v.createTime).format("YYYY-MM-DD HH:mm:ss")}
                      </td>
                    </tr>
                  ))
                ) : (
                  <tr style={{textAlign:"center"}}>
                    <td colSpan="5">暂无数据！</td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
        <div
          className="pagination"
          style={{ display: "flex", justifyContent: "flex-end" }}
        >
          <Pagination
            total={this.state.total}
            current={this.state.pageNum}
            onChange={pageNum => this.handlePageChange(pageNum)}
          />
        </div>
      </div>
    );
  }
}

export default UserList;
